<template>
	<div class="panel pie">
		<h2>设备使用百分比(2020)</h2>
		<div class="chart"></div>
		<div class="panel-footer"></div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				data: [],
				color :['#00ffff', '#ffe000', '#006ced']
			}
		},
		mounted(){
			var myChart3=this.$echarts.init(document.querySelector('.pie .chart'));
			var trafficWay =[{
			    name: '安卓',
			    value: 24
			}, {
			    name: 'iOS',
			    value: 17
			}, {
			    name: '电脑',
			    value: 10
			}];
			for (var i = 0; i <trafficWay.length; i++) {
			    this.data.push({
			        value: trafficWay[i].value,
			        name: trafficWay[i].name,
			        itemStyle: {
			            normal: {
			                borderWidth: 1,
			                shadowBlur: 20,
			                borderColor:this.color[i],
			                shadowColor: this.color[i]
			            }
			        }
			    }, {
			        value: 3,
			        name: '',
			        itemStyle: {
			            normal: {
			                label: {
			                    show: false
			                },
			                labelLine: {
			                    show: false
			                },
			                color: 'rgba(0, 0, 0, 0)',
			                borderColor: 'rgba(0, 0, 0, 0)',
			                borderWidth: 0
			            }
			        }
			    });
			}
			var seriesOption = [{
			    name: '',
			    type: 'pie',
			    clockWise: false,
			    radius: [36, 39],
			    hoverAnimation: false,
			    itemStyle: {
			        normal: {
			            label: {
			                show: true,
			                position: 'outside',
			                color: '#ddd',
			                formatter: function(params) {
			                    var percent = 0;
			                    var total = 0;
			                    for (var i = 0; i < trafficWay.length; i++) {
			                        total += trafficWay[i].value;
			                    }
			                    percent = ((params.value / total) * 100).toFixed(0);
			                    if (params.name !== '') {
			                        return   params.name + '\n' + '\n' + '占比：' + percent + '%';
			                    } else {
			                        return '';
			                    }
			                },
			            },
			            labelLine: {
			                length: 10,
			                length2: 20,
			                show: true,
			                color: '#00ffff'
			            }
			        }
			    },
			    data: this.data
			}];
			var option3 = {
			    backgroundColor: 'rgba(0,0,0,.2)',
			    color: this.color,
			    title: {
			        text: '设备',
			        top: 'center',
			        textAlign: "center",
			        left: "49%",
			        textStyle: {
			            color: '#fff',
			            fontSize: 14,
			            fontWeight: '400'
			        }
			    },
			    graphic: {
			        elements: [{
			            type: "image",
			            z: 3,
			            style: {
			                // image: img,
			                width: 178,
			                height: 178
			            },
			            left: 'center',
			            top: 'center',
			            position: [100, 100]
			        }]
			    },
			    tooltip: {
			        show: false
			    },
			    toolbox: {
			        show: false
			    },
			    series: seriesOption
			}
			myChart3.setOption(option3)
			window.addEventListener('resize',function(){
				myChart3.resize()
			})
		}
	}
</script>

<style>
</style>
